<template>
    <div>
        <el-row>
            <el-col :xs=24 :sm=12 :md="8">
                <el-alert
                    title="选择需要进行权限控制的路由"
                    description="进行权限控制后, 可以指派给指定用户组, 从而限制用户访问. 保存之后需要重新设置用户组权限"
                    type="info"
                    :closable="false"
                    show-icon>
                </el-alert>
                <el-divider></el-divider>
                <el-form ref="form" label-width="0px" v-loading="loading">
                    <el-form-item>
                        <el-card class="access-route-card" v-for="(pVal, module) in routeWithGroups" :key="module">
                            <div slot="header" class="clearfix">
                                <el-checkbox
                                    @change="handleCheckAllChange($event, module)"
                                    :indeterminate="isIndeterminate[module]"
                                    v-model="selectedAll[module]">
                                    全选
                                </el-checkbox>
                            </div>
                            <el-checkbox-group v-model="selected">
                                <el-checkbox
                                    @change="handleCheckedChange($event, module)"
                                    v-for="(cVal, cKey) in pVal.child"
                                    :label="cVal.route"
                                    :key="cKey">
                                    {{ cVal.cname }}
                                </el-checkbox>
                            </el-checkbox-group>
                        </el-card>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="store" :loading="submitLoading">保存</el-button>
                        <el-button @click="$router.go(-1)">返回</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                loading: false,
                submitLoading: false,
                selectedAll: {},
                selected: [],
                access: [],
                routes: [],
                isIndeterminate: {},
            }
        },
        computed: {
            // 分组后的路由
            routeWithGroups () {
                let routes = {};
                for (let i in this.routes) {
                    let module = i.substr(0, i.indexOf('.'));
                    if (routes[module]) {
                        routes[module].child.push({
                            route: i,
                            cname: this.routes[i],
                        })
                    } else {
                        routes[module] = {
                            child: [
                                {
                                    route: i,
                                    cname: this.routes[i],
                                }
                            ]
                        };
                    }
                }
                return routes;
            },
        },
        watch: {
            routeWithGroups() {
                this.autoSelected();
            },
        },
        methods: {
            getData() {
                this.loading = true;
                this.$store.dispatch('manager/AccessIndex').then(res => {
                    this.access = this.selected = res.data.data.access;
                    this.routes = res.data.data.routes;

                }).finally(() => {
                    this.loading = false;
                });
            },
            // 顶级权限选中|取消, 自动选中|取消子级权限
            handleCheckAllChange(val, pKey) {
                //console.log('handleCheckAllChange', val, pKey);
                if (!this.routeWithGroups[pKey].child || !this.routeWithGroups[pKey].child.length) {
                    return;
                }
                this.isIndeterminate[pKey] = false;
                if (val) {
                    this.routeWithGroups[pKey].child.map(v => {
                        if (this.selected.indexOf(v.route) === -1) this.selected.push(v.route);
                    });
                } else {
                    this.routeWithGroups[pKey].child.map(v => {
                        if (this.selected.indexOf(v.route) > -1) this.selected.splice(this.selected.indexOf(v.route), 1);
                    });
                }
            },
            // 子级选中|取消, 检查顶级权限是否需要选中|取消
            handleCheckedChange(val, pKey) {
                //console.log('handleCheckedChange', val, pKey);
                if (!this.routeWithGroups[pKey].child || !this.routeWithGroups[pKey].child.length) return;
                let childRouteArr = this.routeWithGroups[pKey].child.map(v => { return v.route; });
                let checkedLength = this.selected.filter(v => childRouteArr.includes(v)).length;
                this.isIndeterminate[pKey] = checkedLength > 0 && checkedLength < childRouteArr.length;
                this.selectedAll[pKey] = checkedLength === childRouteArr.length;
            },
            // 保存权限路由
            store() {
                this.submitLoading = true;
                this.$store.dispatch('manager/AccessStore', {
                    routes: this.selected
                }).then(res => {
                    this.$message.success(res.data.message);
                    this.initData();
                }).finally(() => {
                    this.submitLoading = false;
                });
            },
            // 自动选中
            autoSelected() {
                for (let i in this.routeWithGroups) this.handleCheckedChange(true, i);
            },
            initData() {
                this.getData();
            },
        },
        created() {
            this.initData();
        }
    }
</script>

<style lang="scss" scoped>

    .access-route-card {
        margin: 0 0 10px 0;
        .el-card__header,.el-card__body {
            line-height: 19px;
        }
        .el-card__body:empty {
            padding: 0;
        }
        /*.el-card__header {*/
        /*    padding: 0 20px;*/
        /*}*/
        /*.el-card__body {*/
        /*    padding: 0 20px;*/
        /*}*/
    }
</style>
